<template>
  <div id="road-panel">
    <div class="tab-panel">
      <span :class="[cur_state==='real'?'active':'','tab']" @click="setCurState('real')">实时路况 <i class="line-tip"></i></span>
      <span :class="[cur_state==='history'?'active':'','tab']" @click="setCurState('history')">历史路况 <i class="line-tip"></i></span>
    </div>
    <div>
      <transition name="fade">
        <CtrlBox v-if="cur_state === 'history'"/>
      </transition>
      <CityBox :chartData="chartData"/>
      <DistrictBox :districtList="districtData"/>
      <RoadBox :roadInfoList="roadInfoData" :roadList="roadData"/>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import eventBus from '../util/event-bus';
  import CtrlBox from './views/CtrlBox.vue'
  import CityBox from './views/CityBox.vue'
  import DistrictBox from './views/DistrictBox.vue'
  import RoadBox from './views/RoadBox.vue'
  import DateTimeHelper from '../util/datetime-helper';
  import RoadController from '../control/roadCtroller'
  export default {
    name: 'RoadPanel',
    data () {
      return {
        curTime: '',  //当前5分钟时间戳
        chartData:{
          index: "",
          monthOffset: "",
          monthOffsetPercent: "",
          ranking: 1,
          speed: "",
          weekOffset: "",
          weekOffsetPercent: "",
          yestOffset: "",
          yestOffsetPercent: "",
        },  //目标城市各指数详情对比
        districtData:[],  //目标城市各行政区指数
        roadInfoData:[],  //行政区指数列表
        roadData:[],  //行政区对应道路等级相关指数
      }
    },
    mounted(){
      this.controller = new RoadController(this);
      eventBus.$on('curIndexType_changed',() => {
        this.updateRoadData();
      });
      eventBus.$on('curCity_changed',() => {
        this.controller.getCityInfo();
        this.controller.getDistrictData();
      });
      this.$nextTick(() => {
        this.curTime = DateTimeHelper.formCurTime();
        this.updateRoadData();
      });
      eventBus.$on('setGlobalInterval',() => {
        this.updateRoadData();
      });
    },
    computed: {
      ...mapGetters(['cur_city', 'cur_district','cur_index_type','district_index_max','cur_timestamp','cur_state','date_type','history_type','history_time','history_hour','cur_segId'])
    },
    components: {
      CtrlBox,
      CityBox,
      DistrictBox,
      RoadBox,
    },
    methods: {
      ...mapMutations(['updateCurCity', 'updateCurDistrict', 'updateRoadType','updateDistrictIndexMax','updateCurSegId']),
      setCurState(type){
        if (type !== this.cur_state) {
          this.updateRoadType(type);
        }
      },
      updateRoadData(){
        this.controller.getCityInfo();
        this.controller.getDistrictData();
        this.controller.getRoadInfoData();
        this.controller.getRoadList();
      }
    },
    watch: {
      cur_district(curVal, oldVal){
        if (curVal !== oldVal) {
          this.controller.getRoadInfoData();
          this.controller.getRoadList();
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../common/common.scss";
  .fade-enter-active, .fade-leave-active {
    transition: all .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    transform: translateY(-10px);
    opacity: 0;
  }

  #road-panel {
    float: left;
    width: calc(100% - 196px);
    height: 100%;
    @include backdropBlur;
    background-color: #35495a;
    .tab-panel {
      display: flex;
      .tab {
        flex-grow: 1;
        position: relative;
        height: 38px;
        line-height: 38px;
        background-color: rgba(0, 0, 0, 0.22);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.05);
        text-align: center;
        font-size: $font-big;
        border-top: 4px solid transparent;
        cursor: pointer;
        @include backdropBlur;
        .line-tip{
          position: absolute;
          top: -4px;
          left: 3%;
          width: 94%;
          height: 4px;
          background-color: rgba(255, 255, 255, 0.12);
          box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05);
          @include backdropBlur;
        }
        &.active {
          background: transparent;
          border-top: 4px solid $bg-highlight;
          color: $font-highlight;
          .line-tip{

          }
        }
      }
    }
  }
</style>
